<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>stomp测试</title>
    <link href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>
    <script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
</head>
<body>
    <noscript><h2 style="color: #ff0000">Seems your browser doesn't support Javascript! Websocket relies on Javascript being
    enabled. Please enable
    Javascript and reload this page!</h2></noscript>
    <div id="main-content" class="container">
        <div class="row">
            <div class="col-md-6">
                <form class="form-inline">
                    <div class="form-group">
                        <label for="connect">注册用户，请输入你的账号：</label>
                        <input type="text" id="userName" class="form-control" value="void" placeholder="请输入账号"/>
                        <button id="confirm" class="btn" type="submit">确认</button>
                    </div>
                    <div class="form-group">
                        <label for="connect">连接webSocket：</label>
                        <button id="connect" class="btn" type="submit">连接</button>
                        <button id="disconnect" class="btn" type="submit" disabled="disabled">断开连接</button>
                    </div>
                </form>
            </div>
            <div class="col-md-6">
                <form class="form-inline">
                    <div class="form-group">
                        <label for="name">接收人：</label>
                        <input type="text" id="name" class="form-control"/>
                        <label for="message">发送消息：</label>
                        <input type="text" id="message"/>
                    </div>
                    <button id="send" class="btn" type="submit">发送</button>
                </form>
            </div>
            <textarea id="token"></textarea>
        </div>
        <div class="row">
            <div class="col-md-12">
                <table id="conversation" class="table">
                    <thead>
                    <tr>
                        <th>接收到的消息</th>
                    </tr>
                    </thead>
                    <tbody id="greetings"></tbody>
                </table>
            </div>
        </div>
    </div>
<script type="text/javascript">
    var stompClient = null;
    function setConnected(connected) {
        $("#connect").prop("disabled", connected);
        $("#disconnect").prop("disabled", connected);
        if (connected){
            $("#conversation").show();
        } else {
            $("#conversation").hide();
        }
        $("#greetings").html("");
    }
    var url = "http://localhost:9010";
    function connect() {
        var userName = $("#userName").val();
        var socket = new SockJS(url + "/stomp?name=" + userName);
        stompClient = Stomp.over(socket);
        stompClient.connect({
            token:"123456789456123456789",
            name:$("#userName").val()
        }, function (frame) {
            setConnected(true);
            console.log("connected:" + frame);
            stompClient.subscribe("/user/" + $("#userName").val() +"/queue", function (data) {
                var mes = data.body;
                showGreeting(mes);
            });
        });
    }
    function disconnect() {
        if (stompClient != null){
            stompClient.disconnect();
        }
        setConnected(false);
        console.log("关闭连接");
    }
    function send() {
        stompClient.send("/webSocket/message", {}, JSON.stringify({
            message:$("#message").val(),
            datetime:"2019-09-25",
            from:$("#userName").val(),
            to:$("#name").val()
        }));
    }
    function showGreeting(message) {
        console.log("显示信息：" + message);
        var json = JSON.parse(message).message;
        $("#greetings").append("<tr><td>" + json + "</td></tr>");
    }
    $(function () {
        $("form").on("submit", function (e) {
            e.preventDefault();
        });
        $("#connect").click(function () {
            console.log("链接服务器")
            connect();
        });
        $("#disconnect").click(function () {
            console.log("断开链接")
            disconnect();
        });
        $("#send").click(function () {
            send();
        });
        $("#confirm").click(function () {
            connect();
        });
    });
</script>
</body>
</html>
